<template>
  <div class="pages">
    <title1>实例</title1>
    <el-card class="el-card-box" shadow="hover">
      <el-form ref="form" :model="formDatas" label-width="80px">
        <el-form-item label="amount" prop="amount">
          <el-input type="number" v-model="formDatas.amount"></el-input>
        </el-form-item>
        <el-form-item label="payProduct" prop="payProduct">
          <el-select v-model="formDatas.payProduct" placeholder="请选择">
            <el-option v-for="item in payProductArr" :key="item.key" :label="item.label" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发送请求</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <title1>参数</title1>
    <el-table border :data="tableData" stripe style="width: 100%">
      <el-table-column prop="key" label="参数名" width="180">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="80">
      </el-table-column>
      <el-table-column prop="isRequired" label="必填" width="80">
      </el-table-column>
      <el-table-column prop="explain" label="说明">
      </el-table-column>
    </el-table>

    <title1>代码</title1>
    <!-- <pre class="code-block-body"> -->
    <!-- </pre> -->
    <code-block>
      <pre>
        /**
            formDatas: {
              amount: null,
              payProduct: null,
           },
        
         */


      async onSubmit() {
        let res = await this.$axios
        .get("http://39.108.161.108:9021/pay/mpay", { params: formDatas })
        .then((response) => (this.info = response.data.sites))
        .catch(function (error) {
        // 请求失败处理
        console.log(error);
        });
        // console.log(res);
        // console.log(this.$http.get('https://www.runoob.com/try/ajax/json_demo.json'))
      }
      
      </pre>
    </code-block>

  </div>
</template>

<script>
export default {
  name: "payApi",
  components: {},
  data() {
    return {
      formDatas: {
        amount: null,
        payProduct: null,
      },
      payProductArr: [
        { label: "网银 B2B", key: "EBANK_B2B" },
        { label: "网银 B2C", key: "EBANK_B2C" },
        { label: "银联在线", key: "UPOP_ONLINE" },
        { label: "银联 wap", key: "UPOP_WAP" },
        { label: "支付宝 wap", key: "ALIPAY_WAP" },
        { label: "微信 SDK", key: "WECHAT_SDK" },
      ],
      tableData: this.$apiConfig.payApi,
    };
    // 网银 B2B EBANK_B2B 网银 B2C， EBANK_B2C 银联在线 UPOP_ONLINE 银联 wap UPOP_WAP 支付宝 wap ALIPAY_WAP 微信 SDK WECHAT_SDK
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async onSubmit() {
      let res = await this.$axios
        .get("http://39.108.161.108:9021/pay/mpay", { params: this.formDatas })
        .then((response) => (this.info = response.data.sites))
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
      // console.log(res);
      // console.log(this.$http.get('https://www.runoob.com/try/ajax/json_demo.json'))
    },
  },
};
</script>
<style lang='less' scoped>
.el-card-box {
  // margin: 40px auto;
  width: 400px;
}

.code-body {
  .t {
    display: flex;
  }
}
</style>